<!-- 培训班课程安排 -->
<template>
  <div class="pxbCourse">
    <div class="search">
      <el-form ref="form" :model="queryParams.params" label-width="0" style="display: flex; align-items: center">
        <el-form-item style="margin-bottom: 0">
          <el-input v-model="queryParams.params.teacherName" placeholder="授课教师"></el-input>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="primary" icon="el-icon-search" @click="inquire">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" v-if="!trainingType"
          @click="InformationFilling('add')">新增培训班课程</el-button>
        <el-button type="primary" icon="el-icon-download" @click="ImportTemolate"
          v-if="!trainingType">下载导入模版</el-button><el-button type="primary" icon="el-icon-upload2" @click="chooseFile"
          v-if="!trainingType">导入</el-button>
        <input ref="upFile" class="file" name="file" type="file" style="display: none" @change="doImport" />
        <!-- <el-button type="danger" icon="el-icon-back" @click="goBack" style="margin-left: 10px"
          >返回</el-button
        > -->
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border height="calc(100vh - 300px)" style="width: 100%" :header-cell-style="{
        background: '#f2f3f4',
        color: '#555',
        'font-weight': 'bold',
        'line-height': '32px',
      }">
        <el-table-column prop="course" label="培训课程内容"> </el-table-column>
        <el-table-column prop="hours" label="课时" width="100">
        </el-table-column>
        <el-table-column prop="trainingTime" label="培训时间" width="180">
        </el-table-column>
        <el-table-column prop="teacherName" label="授课教师" width="180">
        </el-table-column>
        <el-table-column prop="education" label="学历" width="120">
        </el-table-column>
        <el-table-column prop="major" label="专业" width="120">
        </el-table-column>
        <el-table-column prop="title" label="职称" width="120">
        </el-table-column>
        <el-table-column prop="qualificationNumber" label="教师资格证编号" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-view"
              @click="InformationFilling('look', scope.row)">查看</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit"
              @click="InformationFilling('update', scope.row)">修改</el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" @confirm="InformationDel(scope.row)"
              title="确定删除吗？">
              <el-button type="danger" size="small" icon="el-icon-delete" slot="reference" v-if="!trainingType"
                style="margin-left: 10px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.current" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="title" top="10px" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false"
      :before-close="handleClose">
      <div>
        <el-form :model="queryMap" ref="queryMap" :disabled="disabled" label-width="120px" :rules="rules">
          <el-form-item label="授课教师" prop="teacherName">
            <el-input v-model="queryMap.teacherName" placeholder="请输入授课教师"></el-input>
          </el-form-item>
          <el-form-item label="授课教师性别" prop="gender">
            <el-radio-group v-model="queryMap.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>

          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-input v-model="queryMap.education" placeholder="请输入学历"></el-input>
          </el-form-item>
          <el-form-item label="教师资格证编号" prop="qualificationNumber">
            <el-input v-model="queryMap.qualificationNumber" placeholder="请输入教师资格证编号"></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="major">
            <el-input v-model="queryMap.major" placeholder="请输入专业"></el-input>
          </el-form-item>
          <el-form-item label="兼职/全职" prop="jobType">
            <el-radio-group v-model="queryMap.jobType">
              <el-radio label="兼职">兼职</el-radio>
              <el-radio label="全职">全职</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="职称" prop="title">
            <el-input v-model="queryMap.title" placeholder="请输入职称"></el-input>
          </el-form-item>
          <el-form-item label="课时" prop="hours">
            <el-input :disabled="trainingType" v-model="queryMap.hours" placeholder="请输入课时" type="number"></el-input>
          </el-form-item>
          <el-form-item label="培训时间" prop="trainingTime">
            <el-date-picker v-model="queryMap.trainingTime" type="datetime" placeholder="选择批准时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="培训课程内容" prop="course">
            <el-input :disabled="trainingType" v-model="queryMap.course" placeholder="请输入培训课程内容" type="textarea"
              :rows="4"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="trainingVisible" :close-on-click-modal="false" width="30%"
      :before-close="handleClose">
      <span class="html" v-html="trainingTypeText"></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchCoursePaging,
  fetchCourseDetails,
  fetchCourseDelete,
  fetchCourseAdd,
  fetchCourseTemplate,
  fetchCourseQuestions,
  fetchCourseUpdate,
  fetchGetDesc,
} from "@/api/OneStageOneGear/OneStageOneGear.js";
export default {
  data() {
    return {
      tableData: [],
      title: "",
      queryMap: {
        course: "",
        education: "",
        gender: "",
        hours: 0,
        jobType: "",
        id: "",
        major: "",
        qualificationNumber: "",
        teacherName: "",
        title: "",
        trainingTime:"",
        trainingClassInfoId: this.$route.query.id,
      },
      total: 0,
      queryParams: {
        current: 1,
        orderBy: "",
        params: {
          course: "",
          education: "",
          gender: "",
          jobType: "",
          hours: "",
          id: "",
          major: "",
          qualificationNumber: "",
          teacherName: "",
          title: "",
          trainingTime:"",
          trainingClassInfoId: this.$route.query.id,
        },
        size: 10,
      },
      rules: {
        teacherName: [
          { required: true, message: "请输入授课教师", trigger: "blur" },
        ],
        education: [{ required: true, message: "请输入学历", trigger: "blur" }],
        qualificationNumber: [
          {
            required: true,
            message: "请输入教师资格证编号",
            trigger: "blur",
          },
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        title: [{ required: true, message: "请输入职称", trigger: "blur" }],
        gender: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        jobType: [
          {
            required: true,
            message: "请选择授课教师工作类型",
            trigger: "change",
          },
        ],
        hours: [{ required: true, message: "请输入课时", trigger: "blur" }],
        course: [
          { required: true, message: "请输入培训课程内容", trigger: "blur" },
        ],
        trainingTime: [{ required: true, message: "请输入课程培训时间", trigger: "blur" }],
      },
      dialogVisible: false,
      trainingVisible: false,
      disabled: false,
      trainingType: false,
      trainingType2: false,
      trainingTypeText: "",
    };
  },
  created() {
    this.training();
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async training() {
      let res = await fetchGetDesc(this.$route.query.id);
      console.log(res);
      this.trainingType2 = res.data.trainingType == "初训" ? true : false;
      this.trainingType = res.data.trainingType == "初训" ? false : false;
      if (!this.trainingType2) {
        this.trainingVisible = true
      }
      this.trainingTypeText = res.data.description;
    },
    handleOk() {
      this.trainingVisible = false;
    },
    inquire() {
      this.queryParams.current = 1;
      this.getList();
    },
    reset() {
      this.$refs.queryMap.resetFields();
    },
    //查看、修改、新增
    InformationFilling(type, row) {
      this.dialogVisible = true;
      if (type == "look") {
        this.title = "查看培训班课程";
        this.disabled = true;
        this.InformationDetails(row);
      } else if (type == "update") {
        this.title = "修改培训班课程";
        this.InformationDetails(row);
        this.disabled = false;
      } else if (type == "add") {
        this.title = "新增培训班课程";
        this.queryMap = {
          course: "",
          education: "",
          hours: 0,
          id: "",
          gender: "",
          jobType: "",
          major: "",
          qualificationNumber: "",
          teacherName: "",
          title: "",
          trainingClassInfoId: this.$route.query.id,
        };
        this.disabled = false;
      }
    },
    //下载导入模版
    async ImportTemolate() {
      await fetchCourseTemplate();
    },
    //导入
    // 只是为了美化一下导入按钮
    chooseFile: function () {
      this.$refs.upFile.dispatchEvent(new MouseEvent("click"));
    },
    doImport(e) {
      const file = e.target.files[0];
      const id = this.$route.query.id;
      fetchCourseQuestions({ file: file, id: id }).then((res) => {
        if (res.code !== 0) {
          this.$alert(res.data.msg, "导入信息", {
            dangerouslyUseHTMLString: true,
          });
        } else {
          this.$message({
            message: "数据导入成功！",
            type: "success",
          });
          this.getList();
        }
      });
    },
    //新增/修改
    async addCourse() {
      this.$refs.queryMap.validate(async (valid) => {
        if (valid) {
          if (this.title == "修改培训班课程") {
            let res = await fetchCourseUpdate(this.queryMap);
            if (res.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });

              this.dialogVisible = false;
              this.getList();
            }
          } else if (this.title == "新增培训班课程") {
            let res = await fetchCourseAdd(this.queryMap);
            if (res.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });

              this.dialogVisible = false;
              this.getList();
            }
          } else {
            this.dialogVisible = false;
          }
        } else {
          // this.$message("请填写完整信息", "error");
        }
      });
    },
    async InformationDetails(row) {
      console.log(row);

      let res = await fetchCourseDetails(row.id);
      if (res.code == 200) {
        this.queryMap = res.data;
      }
    },
    async getList() {
      let res = await fetchCoursePaging(this.queryParams);
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    async InformationDel(row) {
      let res = await fetchCourseDelete(row.id);
      if (res.code == 200) {
        this.$message({ message: "删除成功", type: "success" });
        this.getList();
      } else {
        this.$message({ message: "删除失败", type: "error" });
      }
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
<style lang="less" scoped>
.html{

  white-space:pre-line;
  line-height:25px;
}
.pxbCourse {
  height: calc(100vh - 100px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .search {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .button {
      display: flex;
      justify-content: flex-end;
    }
  }

  .table {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: calc(100% - 50px);

    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
